import { color } from 'echarts'
import { defineComponent, watch, ref, onMounted, toRefs, computed } from 'vue'
// import imgg from '@/assets/images/blueLabelBg.png';
const blueLabelBg = require('@/assets/images/blueLabelBg.png')
const YelloLabelBg = require('@/assets/images/YelloLabelBg.png')
// 声明类型
const PropsType = {
  cdata: {
    type: Object,
    require: true
  }
} as const

// 定义主体
export default defineComponent({
  props: PropsType,
  setup(props) {
    // 定义 ref
    const chartRef = ref()
    const { xdata, data1, data2 } = toRefs(props.cdata.value)

    const data1MarkPoint = computed(() => {
      const max = Math.max(...data1.value)
      const min = Math.min(...data1.value)
      const last1 = data1.value[data1.value.length - 1]
      const last3 = data1.value[data1.value.length - 3]
      return {
        max,
        min,
        maxIndex: data1.value.indexOf(max),
        minIndex: data1.value.indexOf(min),
        last1,
        last3,
        last1Index: data1.value.indexOf(last1),
        last3Index: data1.value.indexOf(last3)
      }
    })

    const data2MarkPoint = computed(() => {
      const max = Math.max(...data2.value)
      const min = Math.min(...data2.value)
      const last1 = data2.value[data2.value.length - 1]
      const last3 = data2.value[data2.value.length - 3]
      return {
        max,
        min,
        maxIndex: data2.value.indexOf(max),
        minIndex: data2.value.indexOf(min),
        last1,
        last3,
        last1Index: data2.value.indexOf(last1),
        last3Index: data2.value.indexOf(last3)
      }
    })

    // 配置项
    let options = {
      title: {
        text: '用电增速与GDP增速趋势', // 主标题文本
        // subtext: '副标题', // 副标题文本
        left: 'center', // 标题水平位置：'left'/'center'/'right'
        top: '40', // 标题垂直位置
        textStyle: {
          color: '#fff', // 主标题文字颜色
          fontSize: 40 // 主标题文字大小
          // fontWeight: 'bold' // 主标题文字粗细
        }
        // subtextStyle: {
        //   color: '#ccc', // 副标题文字颜色
        //   fontSize: 30 // 副标题文字大小
        // },
        // padding: [10, 0, 0, 0] // 标题内边距 [上, 右, 下, 左]
      },
      tooltip: {
        trigger: 'axis',
        triggerOn: 'mousemove',
        backgroundColor: 'rgba(8,45,74,0.85)',
        borderColor: 'rgb(140,255,74)', //设置边框颜色
        padding: 12,
        axisPointer: {
          type: 'shadow'
        },
        textStyle: {
          fontSize: 40,
          color: '#fff'
        },
        formatter: (params) => {
          let arr = [...params]
          let str = ''
          arr.forEach((item, index) => {
            if (item.componentSubType == 'line') {
              str +=
                '<span style="margin-right:10px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
                item.color +
                ';"></span>' +
                item.seriesName +
                '  ' +
                item.data +
                '%' +
                '<br />'
            } else {
              str +=
                '<span style="margin-right:10px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
                item.color +
                ';"></span>' +
                item.seriesName +
                '  ' +
                item.data +
                '<br />'
            }
          })
          str = arr[0].name + '<br />' + str
          return str
        }
      },
      legend: {
        top: '18%',
        textStyle: {
          fontSize: '32px',
          color: '#fff',
          padding: [0, 8]
        }
      },
      grid: {
        left: '40px',
        right: '26px',
        bottom: '10px',
        top: 200,
        containLabel: true
      },
      xAxis: {
        // data: ['2017', '2018', '2019', '2020', '2021', '2022', '2023', '2024'],
        data: xdata.value,
        triggerEvent: true,
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          show: true,
          rotate: 40,
          interval: 0,
          textStyle: {
            padding: [14, 0, 0, 0],
            fontSize: '28px',
            color: '#fff'
          },
          margin: 40
        }
      },
      yAxis: [
        {
          type: 'value',
          splitLine: {
            show: true, // 显示横向分割线
            lineStyle: {
              color: 'rgba(255,255,255,0.2)', // 设置分割线的颜色
              width: 1, // 设置分割线的宽度
              type: 'dashed' // 设置分割线的类型，solid, dashed, dotted
            }
          },
          axisTick: {
            show: true
          },
          axisLine: {
            show: false,
            lineStyle: {
              width: 2, // 设置线条粗细，单位是px
              color: '#fff', // 可以同时设置颜色
              type: 'solid' // 可以设置线条类型：'solid'|'dashed'|'dotted'
            }
          },
          axisLabel: {
            show: true,
            formatter: function (value) {
              return value + '%' // 添加百分号
            },
            color: '#fff',
            fontSize: 32
          }
        }
      ],
      series: [
        {
          name: '用电增速',
          type: 'line',
          smooth: false,
          symbol: 'circle', //标记的图形为实心圆
          symbolSize: 15, //标记的大小
          itemStyle: {
            //折线拐点标志的样式
            color: '#42E0FF',
            borderColor: '#fff',
            borderWidth: 4
          },
          lineStyle: {
            color: '#42E0FF',
            width: 5
          },
          // data: [2.2, -1.2, 2.5, 3.3, -2.2, 3.4, 2.8, 3.4]
          data: data1.value,
          markPoint: {
            symbol: `image://${blueLabelBg}`,
            symbolOffset: ['-12%', '-66%'],
            symbolSize: [142, 63],
            data: [
              {
                name: '自定义点',
                xAxis: data1MarkPoint.value.last1Index,
                yAxis: data1MarkPoint.value.last1,
                label: {
                  color: 'rgba(66, 224, 255, 1)',
                  position: ['36px', '9px'],
                  fontSize: 32,
                  // 添加百分号
                  formatter: function () {
                    return data1MarkPoint.value.last1 + '%'
                  }
                }
              },
              {
                name: '自定义点2',
                xAxis: data1MarkPoint.value.last3Index,
                yAxis: data1MarkPoint.value.last3,
                label: {
                  color: 'rgba(66, 224, 255, 1)',
                  position: ['36px', '9px'],
                  fontSize: 32,
                  // 添加百分号
                  formatter: function () {
                    return data1MarkPoint.value.last3 + '%'
                  }
                }
              }
            ]
          },
          markArea: {
            data: [
              // 第一季度背景色
              [
                {
                  xAxis: '一季度'
                },
                {
                  xAxis: '二季度'
                }
              ],
              // 第二季度背景色
              [
                {
                  xAxis: '二季度'
                },
                {
                  xAxis: '三季度'
                }
              ]
            ],
            itemStyle: {
              color: 'rgba(50, 250, 250, 0.1)' // 设置背景色为橙色，透明度为 0.2
            }
          }
        },
        {
          name: 'GDP增速',
          type: 'line',
          smooth: false,
          symbol: 'circle', //标记的图形为实心圆
          symbolSize: 15, //标记的大小
          itemStyle: {
            //折线拐点标志的样式
            color: 'rgba(255, 195, 0, 1)',
            borderColor: '#fff',
            borderWidth: 5
          },
          lineStyle: {
            color: 'rgba(255, 195, 0, 1)',
            width: 5
          },
          // data: [2.2, -1.2, 2.5, 3.3, -2.2, 3.4, 2.8, 3.4]
          data: data2.value,
          markPoint: {
            symbol: `image://${YelloLabelBg}`,
            symbolOffset: ['-25%', '-66%'],
            symbolSize: [142, 63],
            data: [
              {
                name: '自定义点3',
                xAxis: data2MarkPoint.value.last1Index,
                yAxis: data2MarkPoint.value.last1,
                label: {
                  color: 'rgba(255, 195, 0, 1)',
                  position: ['36px', '9px'],
                  fontSize: 32,
                  // 添加百分号
                  formatter: function () {
                    return data2MarkPoint.value.last1 + '%'
                  }
                }
              },
              {
                name: '自定义点4',
                xAxis: data2MarkPoint.value.last3Index,
                yAxis: data2MarkPoint.value.last3,
                label: {
                  color: 'rgba(255, 195, 0, 1)',
                  position: ['36px', '9px'],
                  fontSize: 32,
                  // 添加百分号
                  formatter: function () {
                    return data2MarkPoint.value.last3 + '%'
                  }
                }
              }
            ]
          }
        }
      ]
    }

    onMounted(() => {
      if (chartRef.value) {
        chartRef.value.initChart(options)
      }
    })

    return () => {
      const height = '100%'
      const width = '100%'
      return <echart ref={chartRef} height={height} width={width} />
    }
  }
})
